<template>
  <div>
    <el-form :model="form" :rules="rules" :label-width="formLabelWidth">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="form.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="文章分类" prop="cate_id">
        <el-select
          style="width: 100%"
          v-model="form.cate_id"
          placeholder="请选择活动区域"
        >
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :label="item.cate_name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 富文本 -->
      <el-form-item style="height: 260px" label="文章内容">
        <quill-editor
          style="height: 200px"
          v-model="form.content"
          ref="myQuillEditor"
        >
        </quill-editor>
      </el-form-item>
      <!-- 富文本 -->

      <el-form-item label="文章封面">
        <div><img :src="cover" alt="" /></div>
        <input
          type="file"
          ref="ipt"
          hidden="true"
          name=""
          id=""
          @change="changeImg"
        />
        <el-link style="color: #439aff" @click="choose">+ 选择封面</el-link>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="pub('已发布')">发布文章</el-button>
        <el-button type="info" @click="pub('草稿')">存为草稿</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { pubArticleApi } from '@/api/art.js'
export default {
  name: 'pubArt',
  props: ['cateList'],
  data () {
    return {
      form: {
        title: '',
        cate_id: '',
        content: '',
        state: '',
        cover_img: null
      },
      formLabelWidth: '120px',
      rules: {
        title: [{ required: true, message: '请填写文章标题', trigger: 'blur' }],
        cate_id: [
          { required: true, message: '请填写文章标题', trigger: 'blur' }
        ]
      },
      cover: require('../assets/images/cover.jpg')
    }
  },
  created () {},
  computed: {},
  methods: {
    choose () {
      //  触发隐藏的  type=file的表单被点击
      this.$refs.ipt.click()
    },
    changeImg (e) {
      // console.log(e)
      /*
      1、获取图片资源文件
      2、将图片展示出来
        2.1 需要将图片资源文件转换成blob格式
       */

      var file = e.target.files[0]
      console.log(file, 8)
      if (!e.target.files.length) {
        return alert('请选择图片')
      }
      if (file.size / 1024 / 1024 > 2) {
        return alert('请选择尺寸小于2M的图片')
      }
      //  2.1 需要将图片资源文件转换成blob格式
      var blobImg = URL.createObjectURL(file)
      console.log(blobImg, 7)
      this.cover = blobImg
      this.form.cover_img = file //  cover_img需要传的值是一个资源文件
    },

    /* 已发布或者草稿按钮 */
    async pub (state) {
      this.form.state = state
      console.log(this.form, 555544)
      /*
      1、封装请求函数  api
      2、调用api函数
      3、将请求参数数据转换成formData格式
      4、发送请求成功后
        4.1 刷新文章列表页面 关闭对话框

       */
      // 3、将请求参数数据转换成formData格式  new  formData()  包装器
      /*
      title: '',
        cate_id: '',
        content: '',
        state: '',
        cover_img: null
       */
      var fd = new FormData()
      fd.append('title', this.form.title)
      fd.append('cate_id', this.form.cate_id)
      fd.append('content', this.form.content)
      fd.append('state', this.form.state)
      fd.append('cover_img', this.form.cover_img)
      //  4、发送请求===成功后
      const res = await pubArticleApi(fd)
      console.log(res, 77)
      this.$emit('success')
    }
  }
}
</script>
<style lang='less'  scoped>
img {
  width: 200px;
  height: 200px;
}
</style>
